<!-- 创建时间: 2019年10月28日 星期一 17:23  用户添加车辆子组件-->
<template>
    <div class="UserAddPlate_container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <span>你好 {{ userInfo.name }} 先生/女士</span>
                <span v-if="licensePlateCount!=4">
                    <i
                        class="fa fa-plus"
                        aria-hidden="true"
                        title="添加车辆"
                        @click="addPlate"
                        v-show="!inserDOMElement"
                    ></i>
                    <i
                        class="fa fa-floppy-o"
                        aria-hidden="true"
                        title="保存"
                        v-show="inserDOMElement"
                        style="margin-right: 20px;"
                        @click="sendFinalPlateNumber"
                    ></i>
                    <i
                        class="fa fa-trash-o"
                        aria-hidden="true"
                        title="删除"
                        @click="inserDOMElement=!inserDOMElement"
                        v-show="inserDOMElement"
                    ></i>
                </span>
            </div>
            <div class="panel-body">
                <div
                    class="palte"
                    v-for="(item, index) in calculatLicensePlate"
                    :key="index"
                >No.{{ index+1 }}&nbsp;&nbsp;&nbsp;{{ item }}</div>
                <div class="mui-input-group" v-show="inserDOMElement">
                    <div class="mui-input-row">
                        <label>车牌号</label>
                        <span class="btn selectPlateBtn" @click="popupVisible = !popupVisible">
                            {{ selectPlate }}
                            <span class="caret"></span>
                        </span>
                        <input
                            type="text"
                            v-model="inputPlate"
                            class="mui-input-clear"
                            placeholder="请输入车牌号"
                            style="width: 50%;"
                            maxlength="5"
                        />
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <span class="label label-info">提示:</span>
                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每个一用户均可享有一个免费的车辆录入, 且每个用户最多录入3个车辆车牌号(共4辆).
                <code>每录入一辆车辆信息, 将收取车辆车位信息数据管理服务费￥100元. 录入车辆可享有与自身账号对应优惠.</code>
            </div>
        </div>
        <!-- 
            @getPlateValues="getPlateSelectorValue(data, status)" -> 选择的数据, 状态(0表自动触发的值，1表用户选择的值) 
            这个事件表示，子组件向父组件发送消息；子组件向父组件传递子组件中车牌选择器选择的车牌号，触发源点在 onchenge 事件

            :popupVisible="popupVisible" -> popupVisible 控制车牌选择器的显示 初始值为 false
            这个方法表示，父组件向子组件下发数据；父组件中触发显示车牌选择器的数据变量，触发源点在按钮 onclick 事件
            
            @setPopupVisible="setPopupVisible" -> setPopupVisible 子组件发送的消息，要求关闭车牌选择器
            这个事件表示，子组件向父组件发送消息；子组件中触发了隐藏车牌选择器的事件，将把父组件控制显示的数据变量进行更新

            在使用该车牌选择器组件的时候 我们只需要将“”引号内的方法或事件进行定义就好了
        -->
        <ps
            @getPlateValues="getPlateSelectorValue"
            :popupVisible="popupVisible"
            @setPopupVisible="setPopupVisible"
        ></ps>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import ps from "../subComponents/PlateSelector.vue";
const Base64 = require("js-base64").Base64;
import md5 from "js-md5";
import mui from "../../lib/MUI/dist/js/mui.js";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: { ps },
    data() {
        //这里存放数据
        return {
            // 上一个页面传递过来的值
            userInfo: this.$route.query.userInfo,
            // 显示或隐藏车牌选择器
            popupVisible: false,
            // 子组件中的动态值
            selectPlates: [],
            // 用户选择的省区
            selectPlate: "",
            // 用户输入的车牌号
            inputPlate: "",
            // 点击addPlate 按钮显示或隐藏添加车辆 DOM 元素
            inserDOMElement: false,
            // 最后合成的车牌号
            finalPlateNumber: "",
            // 计算出车牌数量
            licensePlateCount: "001"
        };
    },
    //监听属性 类似于data概念
    computed: {
        calculatLicensePlate() {
            var array = this.userInfo.licensePlateNumber;
            array = array.split(",");
            this.licensePlateCount = array.length;
            return array;
        }
    },
    //监控data中的数据变化
    watch: {
        selectPlate: function(newval) {
            this.finalPlateNumber = newval + this.inputPlate;
        },
        inputPlate: function(newval) {
            this.finalPlateNumber = this.selectPlate + newval;
        }
    },
    //方法集合
    methods: {
        addPlate() {
            this.inserDOMElement = !this.inserDOMElement;
        },
        // 获取车牌选择器中改变事件中的值
        getPlateSelectorValue(data, status) {
            this.selectPlates = data;
            if (status == 1) {
                this.selectPlate = this.selectPlates.join(",").replace(",", "");
            }
        },
        // 子组件关闭选择器
        setPopupVisible(data) {
            this.popupVisible = data;
        },
        // 获取用户最后选择完成的车牌号，用户进行确定保存时，将信息封装，发送到后端处理
        sendFinalPlateNumber() {
            if (this.inputPlate == "") {
                mui.alert("车牌号不能为空");
                return;
            }
            // 生产订单编号 车位号(编码) + 时间戳 + 随机数
            var time = new Date().toString();
            var random = (
                parseInt(Math.random() * (99999 - 10000)) + 10000
            ).toString();
            var res = md5(time + random);

            var url = window.location.origin + "#" + this.$route.query.redirect;

            var info = {
                WIDout_trade_no: res,
                WIDtotal_amount: 100,
                WIDsubject: "立方库车辆录入",
                WIDbody: Base64.encode(
                    JSON.stringify({
                        finalPlateNumber: this.finalPlateNumber,
                        CallID: 2,
                        Return_url: url
                    })
                )
            };
            sessionStorage.setItem("setUpdateStatus", 1);
            this.$http.post("pay", { info: JSON.stringify(info) }).then(
                response => {
                    this.$store.commit("setPayForm", response.body);
                    this.$router.push({
                        path: "/CubePage/CubePay"
                    });
                },
                response => {
                    error(response.status, this);
                }
            );
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        if (this.userInfo.name == undefined) {
            this.$router.go(-1);
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.selectPlate = this.selectPlates.join(",").replace(",", "");
    }
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.UserAddPlate_container {
    margin-top: 45px;
    position: absolute;
    width: 100%;
    .panel {
        .panel-heading {
            display: flex;
            justify-content: space-between;
            span:nth-child(1) {
                line-height: 28px;
            }
            span:nth-child(2) {
                color: red;
                font-size: 20px;
                cursor: pointer;
            }
        }
        .panel-body {
            .selectPlateBtn {
                line-height: 40px;
                padding: 0px;
                width: 15%;
                text-align: left;
                font-size: 16px;
                font-weight: bold;
            }
            .selectPlateBtn:hover {
                background-color: #fff;
                border: 0px;
            }
            .mui-input-group {
                margin-top: 15px;
            }
        }
        .palte,
        .mui-input-group {
            border: 1px solid lightblue;
            text-align: center;
            padding: 10px;
            border-radius: 25px;
            font-size: 17px;
            box-shadow: inset 0px 0px 20px 6px lightblue;
            color: lightslategray;
            font-weight: bold;
            margin-bottom: 10px;
        }
    }
}
.mui-input-group .mui-input-row:after {
    left: 0;
    height: 0;
}
.mui-input-group:before,
.mui-input-group:after {
    height: 0;
}
</style>